<template>
  <view class="row" :class="boxBorder ? 'border-bottom' : ''" :style="finalBoxStyle">
    <myIcon v-if="icon" :name="icon" class="left-icon" :size="iconSize" :color="iconColor" :style="finalIconStyle"></myIcon>
    <view class="content" :class="contentBorder ? 'border-bottom' : ''" :style="finalContentStyle">
      <view class="content-container is-relative">
        <slot name="title">
          <view class="title">{{ title }}</view>
        </slot>

        <slot name="value">
          <view class="value" :style="valueStyle">{{ value }}</view>
        </slot>
      </view>
      <my-icon v-if="arrow" name="arrow-right" :style="rightIconStyle" size="10" class="content-icon pl-5"></my-icon>
    </view>
  </view>
</template>

<script>
export default {
  name: 'LineBox',
  props: {
    // 行标题
    title: {
      type: String,
      default: ''
    },
    // 行内容
    value: {
      type: [String, Number],
      default: ''
    },
    // 整个组件的盒子样式
    boxStyle: {
      type: String,
      default: ''
    },
    // 盒子边距
    padding: {
      type: [String, Number],
      default: () => ''
    },
    // 左边图标的样式
    iconStyle: {
      type: String,
      default: () => ''
    },
    // 除图标外的内容区域样式
    contentStyle: {
      type: String,
      default: () => ''
    },
    // 右边图标的样式
    rightIconStyle: {
      type: String,
      default: ''
    },
    // 盒子下边距
    boxBorder: {
      type: Boolean,
      default: () => false
    },
    // 除行首图标的内容区域是否显示下边距
    contentBorder: {
      type: Boolean,
      default: () => false
    },
    // 行首图标
    icon: {
      type: String,
      default: ''
    },
    // 行首图标大小
    iconSize: {
      type: [Number, String],
      default: 23
    },
    // 行首图标颜色
    color: {
      type: String,
      default: ''
    },
    // 是否给行尾带箭头图标
    arrow: {
      type: Boolean,
      default: () => false
    },
    // 行首标题样式
    titleStyle: {
      type: String,
      default: () => ''
    },
    // 行为内容样式
    valueStyle: {
      type: String,
      default: () => ''
    }
  },
  data() {
    return {
      normalPadding: '15px'
    }
  },
  computed: {
    iconColor() {
      if (!this.color) return this.$variables['primary']
      return this.color
    },
    finalIconStyle() {
      if (this.iconStyle === '' && this.contentStyle === '' && this.$validation.isNum(this.padding)) {
        return `padding: ${this.padding}px;`
      }

      // 默认
      if (this.padding === '' && this.contentStyle === '' && this.icon) {
        return `padding: ${this.normalPadding};`
      }
      return `${this.iconStyle};`
    },
    finalContentStyle() {
      if (this.iconStyle === '' && this.contentStyle === '' && this.$validation.isNum(this.padding)) {
        return `padding: ${this.padding}px; padding-left: 0;`
      }

      // 默认
      if (this.padding === '' && this.contentStyle === '' && this.icon) {
        return `padding-right: ${this.normalPadding};`
      }
      return `${this.contentStyle};`
    },
    finalBoxStyle() {
      return `padding: ${this.padding}; ${this.boxStyle};`
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.row {
  display: flex;
  justify-content: justify-between;
  align-items: center;
  // background: $white;
  .left-icon {
    padding-right: 15px;
  }
  .content {
    height: 100%;
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    .content-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex: 1;
    }
  }
}
</style>
